import React from 'react';
import logo from './logo.svg';
import './App.css';
import './Component.css';
// 使用组件的第一步，引入
// import ComponentA from './components/ComponentA'
// import ComponentB from './components/ComponentB'
// import ComC from './components/ComC'
// import ComE from './components/ComE'
// import Blog from './components/Blog'
import Life from './components/Life'
import Router from './Router'
import { Button } from 'antd';
import './App.css';

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      name: 'Jack',
      isShow: true
    }
  }
  changeName() {
    this.setState({
      name: 'Tom'
    })
  }
  toggle() {
    this.setState({
      isShow: !this.state.isShow
    })
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Button type="primary">Button</Button>
          {/* 引入组件的第二步，通过标签插入 */}
          {/* <ComponentA></ComponentA>
          <ComponentB /> */}
          {/* <ComC /> */}
          {/* <Blog /> */}
          {/* <ComE /> */}
          {/* 作用类似vue中的router-view */}
          <Router></Router>
          {/* 组件存在，且显示组件时，才会真的显示 */}
          {/* {this.state.isShow && <Life msg={this.state.name}/>}
          <button onClick={()=>this.changeName()}>父组件-修改姓名</button>
          <button onClick={()=>this.toggle()}>{this.state.isShow?'隐藏':'显示'}</button> */}
          {/* <img src={logo} className="App-logo" alt="logo" /> */}
          
        </header>
      </div>
    );
  }
  
}

export default App;
